// copy 报销单头信息

import React from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { messages, queryCurrencyPrecision, message } from "share/common";
import {Row, Modal, Button, Tag} from "antd"

import constants from 'share/constants'
import Skeleton from 'components/skeleton'
import Condition from 'components/condition'
import HonestView from 'components/template/honest-view'
const { If } = Condition;
import ExpenseDetailAlert from 'containers/expense-report/components/expense-detail-alert'
import baseService from 'share/base.service'
import expenseReportService from 'containers/expense-report/expense-report.service'
import 'styles/expense-report/components/expense-detail-header.scss'

class PaymentHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      honestInfo: {}, //信用详情
      honestModalShow: false,
      isEditing: false,
      bookDate: null,
      bookDateTemp: null,
      isSavingBookDate: false,
      showHonest: false
    }
  }

  componentWillReceiveProps(nextProps) {
    const { info } = nextProps;
    const { honestInfo } = this.state;
    if (info.applicantOID && !honestInfo.creditStatus) {
      //先将creditStatus置为true，防止多次请求该接口
      this.setState({ honestInfo: { creditStatus: true } }, () => {
        this.getHonestInfo(info)
      });
    }
    this.setState({
      bookDate: info.bookDate,
      bookDateTemp: info.bookDate,
    })
  }

  componentDidMount() {
    expenseReportService.getHonestSetting()
      .then((res) => {
        this.setState({ showHonest: res.data.show });
      });
  }

  //获取信用详情信息
  getHonestInfo = (info) => {
    const { applicantOID, applicantJobId } = info;
    baseService.getHonestInfo(applicantOID, applicantJobId).then(res => {
      this.setState({ honestInfo: res.data || {} })
    })
  };

  //获取审批状态
  getStatus = () => {
    const { info } = this.props;
    let status = constants.documentStatus;
    let result = {};
    status.map(item => {
      if (item.value === String(info.status) || item.value === String(info.status * 10000 + info.rejectType)) {
        result = item
      }
    });
    return result
  };

  //是否展示挂起
  isShowHangUp = () => {
    const { approvalChains, approverOID } = this.props;
    let showHangUp = false;
    approvalChains && approvalChains.map(chain => {
      if (chain.approverOID === approverOID && chain.pending) {
        showHangUp = true
      }
    });
    return showHangUp
  };

  handleChange = value => {
    this.setState({ bookDateTemp: value });
  };


  render() {
    const { loading, info, applicant, jobInfo, options } = this.props;
    const { honestInfo, honestModalShow,  showHonest } = this.state;
    let warningList = JSON.parse(info.warningList || '[]');
    let currencyPrecision = queryCurrencyPrecision(info.currencyCode);
    let expenseReportStatus = info ? this.getStatus() : {};
    return (
      <div className="expense-detail-header">
        <Skeleton paragraph={2} loading={loading}>
          <Row>
            <ExpenseDetailAlert noPrint={info.printFree} warningList={warningList}/>
            <span className="top-info-name">{applicant.fullName}</span>
            <span className="detail-info">
              <If value={honestInfo.creditStatus !== 1001 && info.status !== 1005 && showHonest } >
                <a className="honest-info" onClick={() => this.setState({honestModalShow: true})}>
                  {messages('expense-18.key24')/*信用分*/}：{honestInfo.score}
                  <If value={honestInfo.rankFlag}>
                    <span className="ant-divider"/>
                    {messages('expense-18.key25')/*信用等级*/}：{honestInfo.creditRank}
                  </If>
                </a>
              </If>
              {messages('common.user.id')/*工号*/}：{applicant.employeeID}
              <span className="ant-divider"/>
              {messages('common.department')/*部门*/}：
              {options['department']['fullPathDisabled'] === 'true' ? jobInfo.departmentName : jobInfo.departmentPath}
              <span className="ant-divider"/>
              {messages('common.user.company')/*员工公司*/}：{jobInfo.companyName}
            </span>
          </Row>
          <Row>
            <span className="detail-info detail-info-first">
              {info.formName}：{info.parentBusinessCode ? `${info.parentBusinessCode}-` : ''}{info.businessCode}
            </span>
            <span className="detail-info">
              <If value={info.status !== 1001}>
                {messages('common.submit.date')/*提交日期*/}：
                {
                  info.lastSubmittedDate
                    ? moment(info.lastSubmittedDate).format('YYYY-MM-DD')
                    : moment(info.createdDate).format('YYYY-MM-DD')
                }
                </If>
            </span>
            <span className="detail-info">
              {messages('common.column.status')/*状态*/}：{expenseReportStatus.text}
            </span>

            <If value={this.isShowHangUp()}>
              <Tag style={{ marginLeft: 8 }} color="#505564">{messages('expense-18.key26')/*暂挂*/}</Tag>
            </If>
          </Row>
          <Row>
            <span className="amount">
              {messages('expense-18.key4')/*付款金额*/}：
              {info.currencyCode}&nbsp;
              {this.filterMoney(info.totalAmount, currencyPrecision)}
            </span>
          </Row>
        </Skeleton>

        <Modal title={messages('expense-18.key27')/*信用查看*/}
               visible={honestModalShow}
               className="honest-view-modal"
               width={900}
               footer={[
                 <Button type={'primary'} onClick={() => this.setState({honestModalShow: false})}>
                   {messages('expense-18.key28')/*关闭*/}
                 </Button>
               ]}
               onCancel={() => this.setState({honestModalShow: false})}>
          <HonestView applicant={applicant} jobId={jobInfo.id}/>
        </Modal>
      </div>
    )
  }
}

PaymentHeader.propsType = {
  loading: React.PropTypes.bool,
  info: React.PropTypes.object, //报销单详情
  jobInfo: React.PropTypes.object, //岗位信息
  applicant: React.PropTypes.object, //申请人详情
  pageFrom: React.PropTypes.string,
  approvalChains: React.PropTypes.array,
  entry: React.PropTypes.string
};

function mapStateToProps(state) {
  return {
    loginCompany: state.login.loginCompany,
    user: state.login.user,
    options: state.login.options,
  }
}

export default connect(mapStateToProps)(PaymentHeader)
